iT邦幫忙

2024 iThome 鐵人賽

DAY 21
0
Modern Web

初學者入門 - 有人叫我寫blog那就來做吧!系列 第 21

[day-20] - 全端的魔法武器 - Webassembly 簡介

  • 分享至 

  • xImage
  •  

前面有說到在網頁中有個很重要的腳本程式語言稱為Javascript,那現在來簡介近幾年瀏覽器支援的另一種語言WebAssembly

什麼是WebAssembly ?

WebAssembly 是一種低階語言,它的出現是為了解決當網頁計算某些應用時會造成效能不佳的問題同時提高網頁應用的各種可能性,例如:3D遊戲、影像辨識、物理引擎...等。WebAssembly可以讓你可以在網頁上執行幾乎原生速度的應用,這對於需要高效能處理的應用場景有顯著的幫助。

WebAssembly的特點

  • 高效能:Wasm 提供接近原生的執行速度,這對於遊戲開發、影片處理等資源密集型任務非常有利。
  • 多種語言支援轉換:支援多種語言編譯到Wasm,例如C/C++、Rust等,甚至還有部分仍在開發中的Python或Ruby。
  • 安全:WebAssembly在獨立的沙盒環境中運行,並且需要遵守瀏覽器的同源政策與權限政策。
  • 可移植:Wasm可以在各種不同的平台上執行,不需修改就可以在多種瀏覽器和設備上執行。

為何WebAssembly很重要?

在現代許多特殊應用場景會需要使用 WebAssembly ,例如剛提到的Python還有最近很熱門的AI應用,許多都依賴WebAssembly在網頁中執行,因此也可以算是至關重要了。

WebAssembly 的基本概念

WebAssembly 使用二進制格式,因此 Wasm 模組能夠快速下載、解析和執行。雖然 WebAssembly 和 JavaScript 是不同的語言,但它們在瀏覽器中可以無縫地一起工作,你可以直接從 JavaScript 中調用 WebAssembly 函數,這真的很神奇。

如何使用WebAssembly?

要開始使用WebAssembly,你需要知道這幾個步驟。

  1. 準備你的C語言程式碼
  2. 安裝Emscripten:Emscripten是一種常用的工具,可以將C/C++程式碼編譯成WebAssembly。你需要在你的開發環境中安裝Emscripten。
  3. 編譯並生成Wasm文件:透過Emscripten將你的C程式碼編譯成.wasm文件。
  4. 在網頁中載入Wasm模組:使用JavaScript就可以載入你的wasm檔案,並且可以使用API呼叫對應的函數。

上一篇
[day-19] - 淺嚐網頁的滋味 - JavaScript 的簡介
下一篇
[day-21] - 來構建你的第一個 blog?各種神奇的blog框架
系列文
初學者入門 - 有人叫我寫blog那就來做吧!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言